<template>
    <div>
        <el-table :data="noticeData">
            <el-table-column prop="content" label="内容">
            </el-table-column>
            <el-table-column prop="createTime" label="审核时间">
            </el-table-column>
            <el-table-column prop="isRead" label="状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.isRead===1">已读</p>
                    <p v-if="scope.row.isRead===0">未读</p>
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-link @click="readNotice(scope.row)">查看</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!--分页工具条-->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
            </el-pagination>
        </div>
        <!-- 阅读通知表单 -->
        <el-dialog
                title="商品信息"
                :visible.sync="readNoticeVisible"
                width="30%"
        >
            <el-form>
                <br>
                <el-form-item label="标题：" v-if="auditResult.title!==null">{{auditResult.title}}</el-form-item>
                <el-form-item label="内容：">{{auditResult.content}}</el-form-item>
                <el-form-item label="创建时间">{{auditResult.createTime}}</el-form-item>
                <el-form-item label="审核结果：">
                    <p v-if="auditResult.result===1">通过</p>
                    <p v-if="auditResult.result===0">不通过</p>
                </el-form-item>
                <el-form-item label="审核意见">{{auditResult.opinion}}</el-form-item>
                <el-form-item label="审核时间">{{auditResult.auditTime}}</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default{
    mounted(){
        this.currentPage=1;
        this.getNotices();
    },
    methods:{
        handleSizeChange(val) {
            // 重新设置每页显示的条数
            this.pageSize = val;
            this.selectByPage();
        },
        handleCurrentChange(val) {
            // 重新设置当前页码
            this.currentPage = val;
            this.selectByPage();
        },
        //获取通知列表
        getNotices(){
            axios({
                method:"get",
                url:"http://localhost:8080/notice?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                headers:{token:localStorage.getItem("token")}
            }).then(resp => {
                if(resp.data.code){
                    this.noticeData=resp.data.data.rows;
                    this.totalCount=resp.data.data.totalCount;
                }else{
                    this.$message.error(resp.data.msg);
                }
            })
        },
        //获取单条通知
        readNotice(row){
            axios({
                method:"get",
                url:"http://localhost:8080/notice/"+row.id+"/"+row.auditId,
                headers:{token:localStorage.getItem("token")}
            }).then(resp => {
                if(resp.data.code){
                    this.auditResult=resp.data.data;
                    this.readNoticeVisible=true;
                    this.getNotices();
                }else{
                    this.$message.error(resp.data.msg);
                }
            })
        }
    },
    data(){
        return{
            //通知数据
            noticeData:[],
            //总记录数
            totalCount:0,
            //当前页码
            currentPage: 1,
            //每页显示的条数
            pageSize:5,
            //阅读通知表单是否展示标识
            readNoticeVisible:false,
            //审核结果模型
            auditResult:{
                title:'',
                content:'',
                createTime:'',
                result:'',
                opinion:'',
                auditTime:''
            }
        }
    }
}
</script>